<template>
  <div class="articles-preview-wrapper">
    <div class="head">
      <div class="title">{{detailData.title}}</div>
      <div class="info">
        <span>{{detailData.createTime | formatTimes}}</span>
        <span>超级管理员</span>
        <span>
          <i class="el-icon-view"></i>
          <span style="margin-left: 5px;">{{detailData.visits}}</span>
        </span>
      </div>
    </div>
    <div class="content">
      <div class="article" v-html="detailData.articleBody"></div>
    </div>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/articles.js";
export default {
  props: {
    detailId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      detailData: {},
    };
  },
  methods: {
    async getDetailData() {
      try {
        const res = await detail({
          id: this.detailId,
        });
        this.detailData = res.data;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style lang='less'>
.articles-preview-wrapper {
  .head {
    padding: 10px;

    .title {
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: bold;
    }
    .info {
      span {
        margin-right: 10px;
      }
    }
  }

  .content {
    padding: 10px;
    border-top: 1px dashed #ccc;
    background-color: #f5f5f5;

    .article {
      margin: 10px 0;
    }
  }
}
</style>
